<template>
    <div id="box">
        <div id="search" style="padding-left: 150px">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="searchForm.tel" placeholder="联系方式"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="headerTool" style="padding-left: 150px;margin-bottom: 20px">
            <el-button type="primary" plain @click="addInfo">新增</el-button>
            <el-button type="danger" plain @click="deleteInfo">批量删除</el-button>
        </div>
        <!--   :data="tableData"    表格中需要渲染的数据
                label="日期"   表头
                width="180"   列宽
                prop="date"   当前列需要显示的数据
                @selection-change  点击复选框时间
         -->
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 80%;margin: 0 auto">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="联系方式">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="block" style="padding-left: 150px;margin-top: 20px">
            <!--      current-page: 当前页   page-size: 每页展示的条数    total 数据总条数  page-sizes 下拉选选项 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--        页面弹窗
            :visible.sync    控制弹窗 显示还是隐藏    dialogFormVisible   true  显示  false  隐藏
        -->
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form :model="addForm" :label-position="labelPosition" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="addForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="addForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="addForm.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="addForm.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="addForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="addForm.tel" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑" :visible.sync="editDialogFormVisible">
            <el-form :model="editForm" :label-position="labelPosition" label-width="80px">
<!--                隐藏域  封装一个id 用户用户信息的编辑-->
                <el-form-item v-show="false" >
                    <el-input v-model="editForm.id"></el-input>
                </el-form-item>

                <el-form-item label="用户名">
                    <el-input v-model="editForm.username" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="editForm.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="editForm.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="editForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="editForm.tel" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import instance from "@/http";

export default {
    name: "UserView",
    data() {
        return {
            labelPosition: 'right',
            editDialogFormVisible: false,
            dialogFormVisible: false,
            editForm: {
                id:'',
                username: '',
                password: '',
                sex: '',
                age: '',
                tel: '',
                email: ''
            },
            addForm: {
                username: '',
                password: '',
                sex: '',
                age: '',
                tel: '',
                email: ''
            },
            total: 100,
            searchForm: {
                username: '',
                tel: '',
                page: 1,
                limit: 5
            },
            tableData: [],
            ids:[]
        }
    },
    methods: {
        // 编辑用户信息
        editUser(){
            instance.post('/user/edit',this.editForm)
                .then(res=>{
                    if (res.data.code==0){
                        this.$notify.success(res.data.message)
                        this.editDialogFormVisible = false
                    }else {
                        this.$notify.error(res.data.message)
                    }
                    // 数据添加成功后  重载数据表格
                    this.userPage()
                })
        },
        // 添加用户
        addUser(){
            instance.post('/user/add',this.addForm)
                .then(res=>{
                    if (res.data.code==0){
                        this.$notify.success(res.data.message)
                        this.dialogFormVisible = false
                    }else {
                        this.$notify.error(res.data.message)
                    }
                    // 数据添加成功后  重载数据表格
                    this.userPage()
                })
        },
        handleEdit(row) {
            this.editDialogFormVisible = true
            // 将当前行数据回显在表单中
            this.editForm = row
            // 发送http请求
        },
        handleDelete(row) {

            this.$confirm('确认删除当前行数据?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送http请求
                instance.delete('/user/delete/'+row.id)
                    .then(res=>{
                        if (res.data.code==0){
                            this.$notify.success(res.data.message)
                        }else {
                            this.$notify.error(res.data.message)
                        }
                        this.userPage()
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        handleSelectionChange(val) {
            // val 是选中行的所有数据  一般在批量删除时 只需要当前行的id即可   所以可以遍历所有选中行数据  筛选id  箭头函数
             this.ids = val.map(row => row.id)
        },
        //  改变每页显示数据条数时 会自动调用该函数  参数:当前页允许显示数据的条数
        handleSizeChange(limit) {
            this.searchForm.limit = limit
            this.userPage()
        },
        // 改变页码时会自动调用该函数    参数 :当前页的页码
        handleCurrentChange(currentPage) {
            this.searchForm.page = currentPage
            this.userPage()
        },
        onSubmit() {
            this.searchForm.page = 1
            this.userPage()
        },
        addInfo() {
            // 显示弹出层
            this.dialogFormVisible = true
        },
        // 批量删除回调
        deleteInfo() {

            // 判定用户是否已经选择的数据
            if (this.ids.length==0){
                this.$notify.warning("请至少选择一条数据")
                return false
            }

            instance.post("/user/batchDelete",this.ids)
                .then(res=>{
                    if (res.data.code==0){
                        this.$notify.success(res.data.message)
                    }else {
                        this.$notify.error(res.data.message)
                    }
                    this.userPage()
                })
        },

        userPage() {
            instance.post('/user/page', this.searchForm)
                .then(res => {
                    if (res.data.code == 0) {
                        // 后端返回的数据总条数 赋值给total属性   {code:0,message:'hello',data:{total:200,tableData:[{},{}]}}
                        this.total = res.data.data.total
                        this.tableData = res.data.data.tableData
                    }
                })
        }
    },
    created() {   // 自动调用   路由被匹配
        // http请求  获取分页数据
        this.userPage()
    }
}
</script>

<style scoped>

</style>